<template>
  <view class="content">
    <view class="basics">
      <view class="basics_t">
        <ul>
        	<li>
            <text>照片</text>
             <image src="../../static/head_n.png" mode=""></image>
          </li>
        	<li>
            <view>
              <text class="red">*</text>
              <text>姓名</text>
            </view>
            <input type="text" v-model="username" placeholder-class="placeholder-class" placeholder="请填写"/>
          </li>
        	<li>
           <view>
             <text class="red">*</text>
             <text>手机号</text>
           </view>
            <input type="text" v-model="mobile" placeholder-class="placeholder-class" placeholder="请填写"/>
          </li>
        	<li>
            <view>
              <text class="red">*</text>
              <text>性别</text>
            </view>
            <view class="list_r">
              <picker  @change="bindPickerChange" :value="genderIndex" :range="genderArray">
                <input type="text" placeholder-class="placeholder-class" :value="genderArray[genderIndex]" placeholder="请选择" disabled />
              </picker>
              <text class="select"> ></text>
            </view>
          </li>
        	<li>
            <view>
              <text class="red">*</text>
              <text>出生日期</text>
            </view>
           <view class="list_r">
             <picker mode="date" :value="date" @change="bindeBirthChange">
                 <input type="text" placeholder-class="placeholder-class" v-model="birth" disabled placeholder="请选择" />
             </picker>
             <text class="select"> ></text>
           </view>
          </li>
        	<li>
            <text>工作经验</text>
            <view class="list_r">
              <picker  @change="ecperiencePickerChange" :value="genderIndex" :range="experienceArray">
                <input type="text" placeholder-class="placeholder-class" v-model="experienceArray[experienceIndex]" placeholder="请选择" disabled />
              </picker>
              <text class="select"> ></text>
            </view>
          </li>
        	<li>
            <text>求职状态</text>
            <view class="list_r">
              <picker  @change="statusPickerChange" :value="statusIndex" :range="statusArray">
                <input type="text" placeholder-class="placeholder-class" v-model="statusArray[statusIndex]" placeholder="请选择" disabled />
              </picker>
              <text class="select"> ></text>
            </view>
          </li>
        	<li>
            <text>最高学历</text>
            <view class="list_r">
              <picker  @change="educationPickerChange" :value="educationIndex" :range="educationArray">
                <input type="text" placeholder-class="placeholder-class" v-model="educationArray[educationIndex]" placeholder="请选择" disabled />
              </picker>
              <text class="select"> ></text>
            </view>
          </li>
        	<li>
            <text>专业</text>
            <input type="text" v-model="major" placeholder-class="placeholder-class" placeholder="请填写"/>
          </li>
        </ul>
      </view>
      <view class="basics_b">
        <ul>
        	<li>
            <text>籍贯</text>
            <picker mode = 'native' :value="nativeIndex" @change="nativeChange">
                <view class="uni-input">{{nativeIndex}}</view>
            </picker>
          </li>
        	<li>
            <text>现居住地</text>
            <text>江西省赣州市龙南县</text>
          </li>
        	<li>
            <text>政治面貌</text>
            <view class="list_r">
              <input type="text" v-model="face" placeholder-class="placeholder-class" placeholder="请填写"/>
              <text class="select"> ></text>
            </view>
          </li>
        	<li>
            <text>个人邮箱</text>
           <input type="text" v-model="mail" placeholder-class="placeholder-class" placeholder="请填写"/>
          </li>
        	<li>
            <text>自我评价</text>
            <text></text>
          </li>
          <textarea v-model="evaluate" placeholder="自我飞翔，敢于挑战" />
        </ul>
      </view>
    </view>
      
      <view class="addWork">
        <view class="info">
          <view class="tit">
            <view class="uname">
              赣州市创锋科技有限公司
            </view>
            <view class="put">
              <image src="../../static/put.jpg" mode=""></image>
              <text>修改</text>
            </view>
          </view>
          <view class="post">
            <view class="">
              职位：设计师
            </view>
            <view class="">
              2015.08-2018.07
            </view>
          </view>
        </view>
        <view class="add">
            <image src="../../static/add.jpg" mode=""></image>
            <text>工作经历</text>
        </view>
      </view>
      
      <view class="addExperience">
        <view class="info">
            <view class="uname">
              APP设计及平面设计
            </view>
            <view class="put">
              <image src="../../static/put.jpg" mode=""></image>
              <text>修改</text>
            </view>
        </view>
        <view class="info">
            <view class="uname">
              网站设计
            </view>
            <view class="put">
              <image src="../../static/put.jpg" mode=""></image>
              <text>修改</text>
            </view>
        </view>
        <view class="add">
            <image src="../../static/add.jpg" mode=""></image>
            <text>工作经历</text>
        </view>
      </view>
      
      <!-- 添加教育经历 -->
      <view class="addWork">
        <view class="info">
          <view class="tit">
            <view class="uname">
              江西理工大学（2013-2017）
            </view>
            <view class="put">
              <image src="../../static/put.jpg" mode=""></image>
              <text>修改</text>
            </view>
          </view>
          <view class="post">
            <view class="">
              大专 网络信息与技术
            </view>
            <view class="">
             2015-2018
            </view>
          </view>
        </view>
        <view class="add">
            <image src="../../static/add.jpg" mode=""></image>
            <text>教育经历</text>
        </view>
      </view>
      
      <view class="save">
       保存
      </view>
  </view>
</template>

<script>
export default {
  data() {
    const currentsDate = this.getDate({
      format: true
    })
    return {
      username: '',
      mobile: '',//手机
      genderIndex: '',//性别
      genderArray: ['猿','媛','人妖'],
      birth: '',//出生日期
      date: currentsDate,
      experienceIndex: '',//工作经验
      experienceArray: ['小白','经验','二年经验','三年经验','四年经验','五年经验','大佬','萌新'],
      statusIndex: '',//求职状态
      statusArray: ['离职','在职','修仙','有钱牛逼','即将饿死在街头'],
      educationIndex: '',
      educationArray: ['只会恰鸡屎','低能儿', '小学生', '初中生', '高中生', '中专', '专科', '本科', '研究生', '博士','绝地科学家','国家认证美食家'],
      major: '',
      nativeIndex: '',//籍贯
      face: '' ,//政治面貌
      mail: '',//邮箱
      evaluate: '',//自我评价
    }
  },
  methods: {
    bindPickerChange: function(e) {
      console.log('picker发送选择改变，携带值为', e.target.value)
      this.genderIndex = e.target.value
    },
    bindeBirthChange: function(e) {
      this.birth = e.target.value
    },
    ecperiencePickerChange(e) {
      this.experienceIndex = e.target.value
    },
    statusPickerChange(e) {
      this.statusIndex = e.target.value
    },
    educationPickerChange(e) {
      this.educationIndex = e.target.value
    },
    nativeChange(e) {
      this.nativeIndex = e.target.value
    },
    getDate(type) {
      const date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
    
      if (type === 'start') {
        year = year - 60
      } else if (type === 'end') {
        year = year + 2
      }
      month = month > 9 ? month : '0' + month
      day = day > 9 ? day : '0' + day
      return `${year}-${month}-${day}`
    }
  }
}
</script>

<style lang="scss" scoped>
  .red {
    color: red;
  }
  .placeholder-class {
    color: #ddd;
    font-size:28rpx;
    font-weight:500;
  }
  .content {
    background-color: #F1F1F1;
    .basics {
      margin: 10rpx 0;
      .basics_t,
      .basics_b {
        width: 750rpx;
        padding: 0 20rpx;
        background-color: #fff;
          ul li, {
          box-sizing: content-box;
          padding: 30rpx 0;
          font-size:28rpx;
          font-weight:500;
          color:rgba(51,51,51,1);
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #DDDDDD;
          font-size:28rpx;
          font-weight:500;
          color:rgba(51,51,51,1);
          image {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
          }
          .select {
            color: #DDDDDD;
            font-size: 35rpx;
            margin-left: 2rpx;
          }
          input {
            text-align: right;
          }
          .list_r {
            display: flex;
            align-items: center;
          }
        }
        li:nth-child(1){
          padding: 20rpx 0;
        }
        textarea {
          height: 240rpx;
        }
     }
     .basics_b {
       margin-top: 10rpx;
       background-color: #fff;
     }
    }
    
    .addWork {
      margin-top: 10rpx;
      background-color: #fff;
      .info {
        height: 130rpx;
        border-bottom: 1px solid #DDDDDD;
        font-size:28rpx;
        font-weight:500;
        color:rgba(51,51,51,1);
        padding: 31rpx 19rpx 33rpx 31rpx;
        .tit {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .put {
          image {
              width: 23rpx;
              height: 25rpx;
            }
          text {
            margin-left: 4rpx;
          }
          }
        }
        .post {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size:26rpx;
          font-weight:500;
          color:rgba(153,153,153,1);
          margin-top: 10rpx;
        }
      }
      .add {
        height:70rpx;
        line-height: 70rpx;
        font-size:28rpx;
        font-weight:500;
        color:rgba(1,132,233,1);
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          width: 27rpx;
          height: 27rpx;
        }
        text {
        }
      }
    }
    
    .addExperience {
      background-color: #FFFFFF;
      margin-top: 10rpx;
      font-size: 28rpx;
      .info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 88rpx;
        padding: 0 20rpx;
        border-bottom: 1px solid #ddd;
        .put {
          image {
            width: 23rpx;
            height: 25rpx;
          }
          text {
            margin-left: 4rpx;
          }  
        }
      }
      .add {
        height:70rpx;
        line-height: 70rpx;
        font-size:28rpx;
        font-weight:500;
        color:rgba(1,132,233,1);
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          width: 27rpx;
          height: 27rpx;
        }
        text {
        }
      }
    }
    .save {
      width:650rpx;
      height:88rpx;
      background:rgba(1,132,233,1);
      border-radius:6rpx;
      line-height: 88rpx;
      font-size:34rpx;
      font-weight:500;
      color:rgba(255,255,255,1);
      text-align: center;
      margin: 21rpx auto;
    }
      
  }
</style>
